<template>
  <div :style="style">
    <slot/>
  </div>
</template>

<script>
export default {
  name: "EsColumn",
  props:{
    alignItems:{
      type:String,
      default:'center'
    },
    justifyContent: {
      type:String,
      default:'center'
    },
    height:{
      type:Number,
    },
    width:{
      type:Number,
      default: 0
    }
  },
  computed:{
    style(){
      if (this.width<=0){
        return {
          flexDirection:'column',
          flexWrap:'wrap',
          backgroundColor:'transparent',
          alignItems: this.alignItems,
          justifyContent: this.justifyContent,
          height:this.height
        }
      }else{
        return {
          flexDirection:'column',
          flexWrap:'wrap',
          backgroundColor:'transparent',
          alignItems: this.alignItems,
          justifyContent: this.justifyContent,
          height:this.height,
          width:this.width
        }
      }

    }
  }
}
</script>

<style scoped>

</style>
